<template>
  <div class="usage-records">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/merit-transfer">功德转移系统</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>使用记录</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">功德使用记录</div>
        <div class="page-subtitle">查看和管理功德的使用历史记录</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="exportRecords">
          <DownloadOutlined />
          导出记录
        </a-button>
      </div>
    </div>

    <!-- 使用统计 -->
    <div class="usage-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <TransactionOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ usageStats.totalTransactions }}</div>
              <div class="stat-label">总交易数</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <DollarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ usageStats.totalAmount }}</div>
              <div class="stat-label">总使用功德</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ usageStats.todayUsage }}</div>
              <div class="stat-label">今日使用</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ usageStats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 使用记录列表 -->
    <div class="records-list">
      <div class="list-header">
        <h3>使用记录管理</h3>
        <div class="header-actions">
          <a-input-search placeholder="搜索交易ID或用户" style="width: 300px" @search="handleSearch" />
          <a-select v-model:value="typeFilter" placeholder="使用类型" style="width: 120px; margin-left: 12px" @change="handleFilterChange">
            <a-select-option value="">全部类型</a-select-option>
            <a-select-option value="超度">超度</a-select-option>
            <a-select-option value="救赎">救赎</a-select-option>
            <a-select-option value="转移">转移</a-select-option>
            <a-select-option value="兑换">兑换</a-select-option>
          </a-select>
          <a-date-picker v-model:value="dateFilter" placeholder="选择日期" style="margin-left: 12px" @change="handleDateChange" />
        </div>
      </div>

      <a-table :columns="columns" :data-source="filteredRecords" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="getTypeColor(record.type)">
              {{ record.type }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'amount'">
            <span style="color: #ffd700; font-weight: bold">
              {{ record.amount.toLocaleString() }}
            </span>
          </template>
          <template v-if="column.key === 'userRating'">
            <a-rate :value="record.userRating" disabled style="font-size: 12px" />
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)"> 查看详情 </a-button>
              <a-button type="link" size="small" @click="refund(record)" :disabled="record.status !== '已完成' || record.canRefund === false"> 退还 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 查看详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="使用记录详情" width="800px" :footer="null">
      <div class="record-detail" v-if="selectedRecord">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-card class="detail-card">
              <h4>交易信息</h4>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="记录ID">{{ selectedRecord.id }}</a-descriptions-item>
                <a-descriptions-item label="交易ID">{{ selectedRecord.transactionId }}</a-descriptions-item>
                <a-descriptions-item label="使用者">{{ selectedRecord.user }}</a-descriptions-item>
                <a-descriptions-item label="使用类型">
                  <a-tag :color="getTypeColor(selectedRecord.type)">
                    {{ selectedRecord.type }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="使用功德">
                  <span style="color: #ffd700; font-weight: bold; font-size: 18px">
                    {{ selectedRecord.amount.toLocaleString() }}
                  </span>
                </a-descriptions-item>
                <a-descriptions-item label="状态">
                  <a-tag :color="getStatusColor(selectedRecord.status)">
                    {{ selectedRecord.status }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="使用时间">{{ selectedRecord.date }}</a-descriptions-item>
                <a-descriptions-item label="可退还">
                  <a-tag :color="selectedRecord.canRefund ? 'success' : 'error'">
                    {{ selectedRecord.canRefund ? '是' : '否' }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <a-col :span="12">
            <a-card class="detail-card">
              <h4>使用详情</h4>
              <div class="usage-detail">
                <div class="detail-item">
                  <span class="label">用途:</span>
                  <span class="value">{{ selectedRecord.purpose }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">用户评分:</span>
                  <div class="rating-section">
                    <a-rate :value="selectedRecord.userRating" disabled />
                    <span style="margin-left: 8px">{{ selectedRecord.userRating }}/5</span>
                  </div>
                </div>
                <div class="detail-item">
                  <span class="label">备注说明:</span>
                  <span class="value">{{ selectedRecord.notes || '无备注' }}</span>
                </div>
                <div class="detail-item" v-if="selectedRecord.refundInfo">
                  <span class="label">退还信息:</span>
                  <div class="refund-info">
                    <p><strong>退还时间:</strong> {{ selectedRecord.refundInfo.refundDate }}</p>
                    <p><strong>退还金额:</strong> {{ selectedRecord.refundInfo.refundAmount }}</p>
                    <p><strong>退还原因:</strong> {{ selectedRecord.refundInfo.reason }}</p>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="detail-card" style="margin-top: 16px" v-if="selectedRecord.timeline">
          <h4>使用时间线</h4>
          <a-timeline>
            <a-timeline-item v-for="(item, index) in selectedRecord.timeline" :key="index" :color="item.color">
              <p>
                <strong>{{ item.time }}</strong>
              </p>
              <p>{{ item.event }}</p>
              <p v-if="item.note" style="color: rgba(255, 255, 255, 0.6)">{{ item.note }}</p>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </div>
    </a-modal>

    <!-- 退还确认模态框 -->
    <a-modal v-model:open="showRefundModal" title="退还功德" width="500px" @ok="confirmRefund" :confirmLoading="refundLoading">
      <div v-if="selectedRecord">
        <a-alert message="确认要退还此项功德使用吗？" type="warning" style="margin-bottom: 16px" />

        <a-descriptions :column="1" size="small" style="margin-bottom: 16px">
          <a-descriptions-item label="交易ID">{{ selectedRecord.transactionId }}</a-descriptions-item>
          <a-descriptions-item label="使用者">{{ selectedRecord.user }}</a-descriptions-item>
          <a-descriptions-item label="使用功德">
            <span style="color: #ffd700; font-weight: bold">
              {{ selectedRecord.amount.toLocaleString() }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="用途">{{ selectedRecord.purpose }}</a-descriptions-item>
        </a-descriptions>

        <a-form layout="vertical">
          <a-form-item label="退还原因" required>
            <a-select v-model:value="refundReason" placeholder="请选择退还原因">
              <a-select-option value="服务质量问题">服务质量问题</a-select-option>
              <a-select-option value="操作错误">操作错误</a-select-option>
              <a-select-option value="用户申请">用户申请</a-select-option>
              <a-select-option value="系统异常">系统异常</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="退还说明">
            <a-textarea v-model:value="refundNote" :rows="3" placeholder="请详细说明退还原因（可选）" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import dayjs from 'dayjs'
import { DownloadOutlined, TransactionOutlined, DollarOutlined, ClockCircleOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'

const salvationStore = useSalvationStore()

// 使用统计数据
const usageStats = ref({
  totalTransactions: 1568,
  totalAmount: 256789,
  todayUsage: 12456,
  activeUsers: 89
})

// 筛选条件
const typeFilter = ref('')
const searchKeyword = ref('')
const dateFilter = ref(null)

// 模态框状态
const showDetailModal = ref(false)
const showRefundModal = ref(false)
const selectedRecord = ref(null)
const refundLoading = ref(false)
const refundReason = ref('')
const refundNote = ref('')

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`
})

// 模拟使用记录数据
const recordsData = ref([
  {
    id: 'UR001',
    transactionId: 'TXN20240115001',
    user: '观音使者',
    type: '超度',
    purpose: '王老太超度仪式',
    amount: 1500,
    status: '已完成',
    date: '2024-01-15 09:30:00',
    userRating: 5,
    notes: '仪式顺利完成',
    canRefund: false,
    timeline: [
      { time: '2024-01-15 09:30:00', event: '开始超度仪式', color: 'blue', note: '准备仪式用品' },
      { time: '2024-01-15 10:15:00', event: '诵经阶段', color: 'green', note: '念诵《地藏菩萨本愿经》' },
      { time: '2024-01-15 11:00:00', event: '超度完成', color: 'green', note: '亡魂安详离世' }
    ]
  },
  {
    id: 'UR002',
    transactionId: 'TXN20240115002',
    user: '地藏菩萨',
    type: '救赎',
    purpose: '张三救赎计划',
    amount: 2800,
    status: '进行中',
    date: '2024-01-15 10:15:00',
    userRating: 4,
    notes: '救赎进行中',
    canRefund: false,
    timeline: [
      { time: '2024-01-15 10:15:00', event: '开始救赎计划', color: 'blue', note: '制定救赎方案' },
      { time: '2024-01-15 10:30:00', event: '第一阶段执行', color: 'green', note: '清洗业障' },
      { time: '2024-01-15 11:00:00', event: '第二阶段进行中', color: 'orange', note: '正在净化心灵' }
    ]
  },
  {
    id: 'UR003',
    transactionId: 'TXN20240115003',
    user: '文殊菩萨',
    type: '转移',
    purpose: '功德池补充',
    amount: 5000,
    status: '已完成',
    date: '2024-01-15 11:20:00',
    userRating: 5,
    notes: '转移成功',
    canRefund: true,
    timeline: [
      { time: '2024-01-15 11:20:00', event: '发起功德转移', color: 'blue', note: '转移5000功德到公共池' },
      { time: '2024-01-15 11:21:00', event: '转移完成', color: 'green', note: '转移成功' }
    ]
  },
  {
    id: 'UR004',
    transactionId: 'TXN20240114001',
    user: '普贤菩萨',
    type: '兑换',
    purpose: '法器兑换',
    amount: 800,
    status: '已完成',
    date: '2024-01-14 16:45:00',
    userRating: 4,
    notes: '兑换成功',
    canRefund: false,
    timeline: [
      { time: '2024-01-14 16:45:00', event: '申请法器兑换', color: 'blue', note: '申请兑换念珠' },
      { time: '2024-01-14 16:50:00', event: '兑换成功', color: 'green', note: '获得黄金念珠' }
    ]
  },
  {
    id: 'UR005',
    transactionId: 'TXN20240114002',
    user: '弥勒佛',
    type: '超度',
    purpose: '李大爷紧急超度',
    amount: 3200,
    status: '失败',
    date: '2024-01-14 14:30:00',
    userRating: 2,
    notes: '仪式中断，已退还功德',
    canRefund: false,
    refundInfo: {
      refundDate: '2024-01-14 15:00:00',
      refundAmount: 3200,
      reason: '仪式中断'
    },
    timeline: [
      { time: '2024-01-14 14:30:00', event: '开始紧急超度', color: 'blue', note: '开始仪式准备' },
      { time: '2024-01-14 14:45:00', event: '仪式中断', color: 'red', note: '外界干扰导致中断' },
      { time: '2024-01-14 15:00:00', event: '功德退还', color: 'green', note: '全额退还3200功德' }
    ]
  }
])

// 表格列配置
const columns = [
  {
    title: '记录ID',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '交易ID',
    dataIndex: 'transactionId',
    key: 'transactionId',
    width: 150
  },
  {
    title: '使用者',
    dataIndex: 'user',
    key: 'user',
    width: 100
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 80
  },
  {
    title: '用途',
    dataIndex: 'purpose',
    key: 'purpose',
    width: 150
  },
  {
    title: '使用功德',
    dataIndex: 'amount',
    key: 'amount',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '使用时间',
    dataIndex: 'date',
    key: 'date',
    width: 160
  },
  {
    title: '评分',
    dataIndex: 'userRating',
    key: 'userRating',
    width: 100
  },
  {
    title: '操作',
    key: 'actions',
    width: 140
  }
]

// 过滤后的记录列表
const filteredRecords = computed(() => {
  let result = recordsData.value

  // 类型筛选
  if (typeFilter.value) {
    result = result.filter((record) => record.type === typeFilter.value)
  }

  // 关键词搜索
  if (searchKeyword.value) {
    result = result.filter((record) => record.transactionId.includes(searchKeyword.value) || record.user.includes(searchKeyword.value))
  }

  // 日期筛选
  if (dateFilter.value) {
    const filterDate = dayjs(dateFilter.value).format('YYYY-MM-DD')
    result = result.filter((record) => record.date.startsWith(filterDate))
  }

  pagination.value.total = result.length
  return result
})

// 搜索处理
const handleSearch = (value) => {
  searchKeyword.value = value
}

// 筛选变更处理
const handleFilterChange = () => {
  pagination.value.current = 1
}

// 日期变更处理
const handleDateChange = () => {
  pagination.value.current = 1
}

// 导出记录
const exportRecords = () => {
  message.success('记录导出功能开发中...')
}

// 查看详情
const viewDetail = (record) => {
  selectedRecord.value = record
  showDetailModal.value = true
}

// 退还功德
const refund = (record) => {
  if (!record.canRefund) {
    message.warning('此记录不支持退还')
    return
  }

  selectedRecord.value = record
  refundReason.value = ''
  refundNote.value = ''
  showRefundModal.value = true
}

// 确认退还
const confirmRefund = async () => {
  if (!refundReason.value) {
    message.error('请选择退还原因')
    return
  }

  try {
    refundLoading.value = true

    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // 更新记录状态
    const index = recordsData.value.findIndex((item) => item.id === selectedRecord.value.id)
    if (index !== -1) {
      recordsData.value[index].status = '已退还'
      recordsData.value[index].canRefund = false
      recordsData.value[index].refundInfo = {
        refundDate: new Date().toLocaleString(),
        refundAmount: selectedRecord.value.amount,
        reason: refundReason.value
      }

      // 添加退还时间线
      if (recordsData.value[index].timeline) {
        recordsData.value[index].timeline.push({
          time: new Date().toLocaleString(),
          event: '功德退还',
          color: 'green',
          note: `退还原因: ${refundReason.value}`
        })
      }
    }

    showRefundModal.value = false
    message.success('功德退还成功')
  } catch (error) {
    message.error('退还失败，请重试')
  } finally {
    refundLoading.value = false
  }
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    超度: 'blue',
    救赎: 'green',
    转移: 'purple',
    兑换: 'orange'
  }
  return colors[type] || 'default'
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    已完成: 'success',
    进行中: 'processing',
    失败: 'error',
    已取消: 'warning',
    已退还: 'cyan'
  }
  return colors[status] || 'default'
}

onMounted(() => {
  console.log('功德使用记录页面已加载')
})
</script>

<style lang="scss" scoped>
.usage-records {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 使用统计
  .usage-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }
    }
  }

  // 记录列表
  .records-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: #fff;
        font-size: 1.2rem;
      }

      .header-actions {
        display: flex;
        align-items: center;
      }
    }

    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }

  // 模态框样式
  .record-detail {
    .detail-card {
      margin-bottom: 16px;
      h4 {
        margin-top: 0;
        margin-bottom: 16px;
        color: #ffd700;
        font-size: 1.1rem;
      }
      .usage-detail {
        .detail-item {
          margin-bottom: 12px;
          .label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            margin-right: 8px;
          }
          .value {
            color: #fff;
            font-size: 1rem;
          }
          .rating-section {
            display: flex;
            align-items: center;
            .ant-rate {
              margin-right: 8px;
            }
          }
          .refund-info {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            p {
              margin-bottom: 4px;
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }

  // 模态框全局样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(26, 26, 46, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #fff;
      }
    }

    .ant-modal-body {
      background: transparent;
      color: #fff;
    }

    .ant-modal-footer {
      background: rgba(255, 255, 255, 0.05);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 详情卡片样式
  :deep(.ant-card) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;

    .ant-card-head {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: #ffd700;
        font-weight: bold;
      }
    }

    .ant-card-body {
      background: transparent;
      color: #fff;
    }
  }

  // 描述列表样式
  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      color: rgba(255, 255, 255, 0.8);
    }

    .ant-descriptions-item-content {
      color: #fff;
    }
  }

  // 时间线样式
  :deep(.ant-timeline) {
    .ant-timeline-item-content {
      color: #fff;

      p {
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  // 表单样式
  :deep(.ant-form) {
    .ant-form-item-label > label {
      color: rgba(255, 255, 255, 0.9);
    }

    .ant-input,
    .ant-select-selector,
    .ant-select-selection-search-input {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;

      &:hover {
        border-color: #ffd700;
      }

      &:focus {
        border-color: #ffd700;
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
      }
    }

    .ant-input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    .ant-select-dropdown {
      background: rgba(26, 26, 46, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);

      .ant-select-item-option {
        color: #fff;

        &:hover {
          background: rgba(255, 215, 0, 0.1);
        }

        &.ant-select-item-option-selected {
          background: rgba(255, 215, 0, 0.2);
          color: #ffd700;
        }
      }
    }
  }

  // 警告框样式
  :deep(.ant-alert) {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);

    .ant-alert-message {
      color: #fff;
    }
  }

  // 模态框样式
  .record-detail {
    .detail-card {
      margin-bottom: 16px;
      h4 {
        margin-top: 0;
        margin-bottom: 16px;
        color: #ffd700;
        font-size: 1.1rem;
      }
      .usage-detail {
        .detail-item {
          margin-bottom: 12px;
          .label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            margin-right: 8px;
          }
          .value {
            color: #fff;
            font-size: 1rem;
          }
          .rating-section {
            display: flex;
            align-items: center;
            .ant-rate {
              margin-right: 8px;
            }
          }
          .refund-info {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            p {
              margin-bottom: 4px;
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .usage-records {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .records-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }
}

// 模态框全局样式
:deep(.ant-modal) {
  .ant-modal-content {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .ant-modal-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .ant-modal-title {
      color: #fff;
    }
  }

  .ant-modal-body {
    background: transparent;
    color: #fff;
  }

  .ant-modal-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

// 详情卡片样式
:deep(.ant-card) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;

  .ant-card-head {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .ant-card-head-title {
      color: #ffd700;
      font-weight: bold;
    }
  }

  .ant-card-body {
    background: transparent;
    color: #fff;
  }
}

// 描述列表样式
:deep(.ant-descriptions) {
  .ant-descriptions-item-label {
    color: rgba(255, 255, 255, 0.8);
  }

  .ant-descriptions-item-content {
    color: #fff;
  }
}

// 时间线样式
:deep(.ant-timeline) {
  .ant-timeline-item-content {
    color: #fff;

    p {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 表单样式
:deep(.ant-form) {
  .ant-form-item-label > label {
    color: rgba(255, 255, 255, 0.9);
  }

  .ant-input,
  .ant-select-selector,
  .ant-select-selection-search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;

    &:hover {
      border-color: #ffd700;
    }

    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
  }

  .ant-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .ant-select-dropdown {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .ant-select-item-option {
      color: #fff;

      &:hover {
        background: rgba(255, 215, 0, 0.1);
      }

      &.ant-select-item-option-selected {
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }
    }
  }
}

// 警告框样式
:deep(.ant-alert) {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);

  .ant-alert-message {
    color: #fff;
  }
}
</style>
